<template>
  <div class="author-analytics">
    <a-row :gutter="[16, 16]">
      <!-- 作者概览 -->
      <a-col :span="6" v-for="stat in authorStats" :key="stat.title">
        <a-card>
          <a-statistic
            :title="stat.title"
            :value="stat.value"
            :precision="stat.precision || 0"
            :suffix="stat.suffix"
            :valueStyle="{ color: stat.color || '#3f8600' }"
          />
        </a-card>
      </a-col>

      <!-- 作者增长趋势 -->
      <a-col :span="24">
        <a-card title="作者增长趋势">
          <a-radio-group v-model:value="timeRange" style="margin-bottom: 16px">
            <a-radio-button value="7">近7天</a-radio-button>
            <a-radio-button value="30">近30天</a-radio-button>
            <a-radio-button value="90">近90天</a-radio-button>
          </a-radio-group>
          <div ref="authorGrowthChart" style="height: 300px"></div>
        </a-card>
      </a-col>

      <!-- 作品产出分析 -->
      <a-col :span="12">
        <a-card title="作品产出分析">
          <div ref="outputChart" style="height: 300px"></div>
        </a-card>
      </a-col>

      <!-- 作者活跃度 -->
      <a-col :span="12">
        <a-card title="作者活跃度">
          <div ref="activityChart" style="height: 300px"></div>
        </a-card>
      </a-col>

      <!-- 作者排行榜 -->
      <a-col :span="24">
        <a-card title="作者排行榜">
          <a-tabs>
            <a-tab-pane key="income" tab="收入排行">
              <a-table :columns="incomeColumns" :data-source="topAuthors" :pagination="{ pageSize: 10 }">
                <template #bodyCell="{ column, record }">
                  <template v-if="column.key === 'income'">
                    ¥{{ record.income.toLocaleString() }}
                  </template>
                  <template v-if="column.key === 'trend'">
                    <span :style="{ color: record.trend > 0 ? '#f5222d' : '#52c41a' }">
                      {{ record.trend > 0 ? '+' : '' }}{{ record.trend }}%
                    </span>
                  </template>
                </template>
              </a-table>
            </a-tab-pane>
            <a-tab-pane key="works" tab="作品排行">
              <a-table :columns="worksColumns" :data-source="topAuthors" :pagination="{ pageSize: 10 }" />
            </a-tab-pane>
            <a-tab-pane key="fans" tab="粉丝排行">
              <a-table :columns="fansColumns" :data-source="topAuthors" :pagination="{ pageSize: 10 }" />
            </a-tab-pane>
          </a-tabs>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { getAuthorAnalytics } from '@/api/analytics'

export default defineComponent({
  name: 'AuthorAnalytics',
  setup() {
    const timeRange = ref('7')
    const authorStats = ref([
      { title: '总作者数', value: 12580, color: '#3f8600' },
      { title: '活跃作者', value: 8526, suffix: '人', color: '#1890ff' },
      { title: '日均更新字数', value: 2567890, suffix: '字', color: '#722ed1' },
      { title: '本月新增作者', value: 1258, suffix: '人', color: '#faad14' }
    ])

    const incomeColumns = [
      { title: '排名', dataIndex: 'rank', key: 'rank', width: 80 },
      { title: '作者', dataIndex: 'name', key: 'name' },
      { title: '作品数', dataIndex: 'worksCount', key: 'worksCount', width: 100 },
      { title: '总收入', dataIndex: 'income', key: 'income', width: 120 },
      { title: '趋势', dataIndex: 'trend', key: 'trend', width: 100 }
    ]

    const worksColumns = [
      { title: '排名', dataIndex: 'rank', key: 'rank', width: 80 },
      { title: '作者', dataIndex: 'name', key: 'name' },
      { title: '作品数', dataIndex: 'worksCount', key: 'worksCount', width: 100 },
      { title: '总字数', dataIndex: 'wordCount', key: 'wordCount', width: 120 },
      { title: '月更新量', dataIndex: 'monthlyUpdate', key: 'monthlyUpdate', width: 120 }
    ]

    const fansColumns = [
      { title: '排名', dataIndex: 'rank', key: 'rank', width: 80 },
      { title: '作者', dataIndex: 'name', key: 'name' },
      { title: '粉丝数', dataIndex: 'fansCount', key: 'fansCount', width: 100 },
      { title: '作品数', dataIndex: 'worksCount', key: 'worksCount', width: 100 },
      { title: '互动率', dataIndex: 'engagementRate', key: 'engagementRate', width: 100 }
    ]

    const topAuthors = ref([
      {
        rank: 1,
        name: '作者A',
        worksCount: 25,
        income: 125800,
        trend: 12,
        wordCount: 2580000,
        monthlyUpdate: 150000,
        fansCount: 25800,
        engagementRate: '5.8%'
      }
      // ... 更多数据
    ])

    const authorGrowthChart = ref(null)
    const outputChart = ref(null)
    const activityChart = ref(null)

    onMounted(() => {
      initAuthorGrowthChart()
      initOutputChart()
      initActivityChart()
    })

    const initAuthorGrowthChart = () => {
      const chart = echarts.init(authorGrowthChart.value)
      chart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [120, 132, 101, 134, 90, 230, 210],
          type: 'line',
          smooth: true
        }]
      })
    }

    const initOutputChart = () => {
      const chart = echarts.init(outputChart.value)
      chart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['1-5部', '6-10部', '11-20部', '20部以上']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [2500, 1800, 950, 320],
          type: 'bar'
        }]
      })
    }

    const initActivityChart = () => {
      const chart = echarts.init(activityChart.value)
      chart.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [{
          type: 'pie',
          radius: '50%',
          data: [
            { value: 5200, name: '每日更新' },
            { value: 2100, name: '每周更新' },
            { value: 1500, name: '每月更新' },
            { value: 3800, name: '不定期更新' }
          ]
        }]
      })
    }

    return {
      timeRange,
      authorStats,
      incomeColumns,
      worksColumns,
      fansColumns,
      topAuthors,
      authorGrowthChart,
      outputChart,
      activityChart
    }
  }
})
</script>

<style scoped>
.author-analytics {
  padding: 24px;
}
</style> 